<html><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Ansel手机浏览器自定义select</title>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script><script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script src="ansel_select.js"></script>
<style>
        html{font-family: "Helvetica Neue", Helvetica, sans-serif;  font-size: 20px;  }
        html,body {  -webkit-touch-callout:none;  -webkit-text-size-adjust:none;  -webkit-tap-highlight-color:rgba(0, 0, 0, 0);  -webkit-user-select:auto;  width: 100%;}
        body {  line-height: 1.5;  font-size: 0.8rem;  color: #212121;  background-color: #f5f5f5;outline: 0;}
        html,body,header,section,footer,div,ul,ol,li,img,a,span,em,del,legend,center,strong,var,fieldset,form,label,dl,dt,dd,cite,input,hr,time,mark,code,figcaption,figure,textarea,h1,h2,h3,h4,h5,h6,p{  margin:0;  border:0;  padding:0;  font-style:normal;  }
        * {  -webkit-box-sizing: border-box;  box-sizing: border-box;  -webkit-user-select: auto;  -webkit-tap-highlight-color: transparent;  outline: none;  }
        ul, li {  list-style: none;  }
        p {  font-size: 0.7rem;  color: #757575;  }
        a {  color: #0062cc;  text-decoration: none;  background-color: transparent;  }
        i {font-style:normal}
        textarea {overflow: hidden;resize: none;  }
        button {overflow: visible;}
        button,select {  text-transform: none;  }
        .demo {}

        /*插件自定义样式*/
        .ansel_input {height:40px;line-height: 40px;margin:30px auto;width:200px;padding:0 10px;background:#fff;border-radius: 4px;}
        .ansel_input .ansel_inputval {height:40px;line-height: 40px;width:100%;}
    </style>
<style type="text/css">.ansel_select {position: fixed;top:15%;left:10%;display:none;background:#fff;width:80%;height:70%;overflow: hidden;z-index: 19951024;border-radius: 4px;box-shadow: 0px 3px 14px 3px #ccc;}  .ansel_search {margin:10px;border-bottom:1px solid #f2f2f2;overflow:hidden;height:35px;line-height: 35px;}  .ansel_search .ansel_search_input {border:none;height:35px;line-height: 35px;width:100%;}  .ansel_ul {overflow: hidden;margin:10px;border-top:1px solid #f2f2f2;overflow-y: auto;}  .ansel_ul .ansel_li {border-bottom:1px solid #f2f2f2;height:35px;line-height: 35px;overflow:hidden;text-overflow:ellipsis; white-space: nowrap;}  .ansel_ul .ansel_li:active{background:#f2f2f2;}  .ansel_btns {position: absolute;bottom:0;border-top:1px solid #f2f2f2;background:#fff;width:100%;height:50px;line-height: 50px;z-index: 19951024;}  .ansel_btns .ansel_btnss {width:220px;margin:10px auto;overflow:hidden}  .ansel_btns .ansel_btnss .ansel_btn {height:30px;line-height: 30px;width:100px;text-align: center;font-size:14px;float:left;}  .ansel_btns .ansel_btnss .ansel_ok {background:#09f;color:#fff;margin-right:10px;}  .ansel_btns .ansel_btnss .ansel_no {background:#ccc;color:#222;margin-left:10px;}  .ansel_ul .ansel_li .ansel_check {height:14px;width:14px;display: block;float:left;border-radius: 100%;border:1px solid #ccc;margin:10px 5px 10px 0;box-shadow: 0 0 2px 0 #ccc inset;}  .ansel_ul .ansel_li .ansel_cur {box-shadow: 0 0px 1px 3px #09f inset;border: 1px solid #09f; }</style></head>
<body class="" style="">
<div class="main">
1、指定选中数据
<div class="demo">
<div class="ansel_input"><input class="ansel_inputval" placeholder="选择数据1" readonly=""></div><div class="ansel_select"><div class="ansel_search"><input class="ansel_search_input" placeholder="搜索"></div><div class="ansel_ul"><div class="ansel_li" val=""><span class="ansel_check"></span>选择数据1</div><div class="ansel_li" val="aaa"><span class="ansel_check ansel_cur"></span>aaa</div><div class="ansel_li" val="bbb"><span class="ansel_check"></span>bbb</div><div class="ansel_li" val="ccc"><span class="ansel_check"></span>ccc</div><div class="ansel_li" val="ddd"><span class="ansel_check"></span>ddd</div><div class="ansel_li" val="high"><span class="ansel_check"></span>high</div><div class="ansel_li" val="evaporation"><span class="ansel_check"></span>evaporation</div><div class="ansel_li" val="moisture"><span class="ansel_check"></span>moisture</div><div class="ansel_li" val="when"><span class="ansel_check"></span>when</div><div class="ansel_li" val="thin"><span class="ansel_check"></span>thin</div><div class="ansel_li" val="approach"><span class="ansel_check"></span>approach</div><div class="ansel_li" val="benefit"><span class="ansel_check"></span>benefit</div></div><div class="ansel_btns"><div class="ansel_btnss"><div class="ansel_btn ansel_ok">确定</div><div class="ansel_btn ansel_no">关闭</div></div></div></div><select class="select" isval="true" msg="选择数据1" style="display: none;">
<option value="">选择数据1</option>
<option value="aaa" selected="">aaa</option>
<option value="bbb">bbb</option>
<option value="ccc">ccc</option>
<option value="ddd">ddd</option>
<option value="high">high</option>
<option value="evaporation">evaporation</option>
<option value="moisture">moisture</option>
<option value="when">when</option>
<option value="thin">thin</option>
<option value="approach">approach</option>
<option value="benefit">benefit</option>
</select>
</div>
2、默认全部不选择
<div class="demo">
<div class="ansel_input"><input class="ansel_inputval" placeholder="选择数据2" readonly=""></div><div class="ansel_select"><div class="ansel_search"><input class="ansel_search_input" placeholder="搜索"></div><div class="ansel_ul"><div class="ansel_li" val=""><span class="ansel_check ansel_cur"></span>选择数据2</div><div class="ansel_li" val="1"><span class="ansel_check"></span>1</div><div class="ansel_li" val="2"><span class="ansel_check"></span>2</div><div class="ansel_li" val="3"><span class="ansel_check"></span>3</div><div class="ansel_li" val="4"><span class="ansel_check"></span>4</div></div><div class="ansel_btns"><div class="ansel_btnss"><div class="ansel_btn ansel_ok">确定</div><div class="ansel_btn ansel_no">关闭</div></div></div></div><select class="select" isval="true" msg="选择数据2" style="display: none;">
<option value="">选择数据2</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
3、允许不选择数据
<div class="demo">
<div class="ansel_input"><input class="ansel_inputval" placeholder="选择数据2" readonly=""></div><div class="ansel_select"><div class="ansel_search"><input class="ansel_search_input" placeholder="搜索"></div><div class="ansel_ul"><div class="ansel_li" val=""><span class="ansel_check ansel_cur"></span>选择数据2</div><div class="ansel_li" val="1"><span class="ansel_check"></span>1</div><div class="ansel_li" val="2"><span class="ansel_check"></span>2</div><div class="ansel_li" val="3"><span class="ansel_check"></span>3</div><div class="ansel_li" val="4"><span class="ansel_check"></span>4</div></div><div class="ansel_btns"><div class="ansel_btnss"><div class="ansel_btn ansel_ok">确定</div><div class="ansel_btn ansel_no">关闭</div></div></div></div><select class="select" isval="false" msg="选择数据2" style="display: none;">
<option value="">选择数据2</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
</div>
<script>
    //插件初始化配置
    $('.select').anselcfg({});
</script>

</body></html>